<template>
  <div class="content">
    <van-field
      v-model="tel"
      style="margin-top: 20px"
      placeholder="请输入手机号码" />
    <van-button
      round
      block
      @click="docheckphoneFN"
      :disabled="!flag"
      color="#ff6666"
      style="margin-top: 20px">下一步
    </van-button>
    <div class="boxCheck">
      <van-checkbox v-model="checked">同意xxxxx用户协议</van-checkbox>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'

import {
  Form,
  Field,
  Button,
  Dialog,
  NavBar,
  Checkbox
} from 'vant'

import { docheckphone } from '@/api/register'

Vue.use(Form)
Vue.use(Field)
Vue.use(Button)
Vue.use(Dialog)
Vue.use(NavBar)
Vue.use(Checkbox)

export default {
  name: 'step1',
  data () {
    return {
      tel: '18919382553',
      radio: '1',
      checked: false
    }
  },
  computed: {
    flag: function () {
      return /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-7|9])|(?:5[0-3|5-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[1|8|9]))\d{8}$/.test(this.tel)
    }
  },
  methods: {
    async docheckphoneFN () {
      if (this.checked) {
        const res = await docheckphone({ tel: this.tel })
        console.log(res)
        if (res.data.code === '10005') {
          Dialog.confirm({
            message: '该账户已经被注册',
            confirmButtonText: '不是本人并继续',
            cancelButtonColor: '更换手机号并重新注册'
          })
            .then(() => {
              // on confirm
              // TODO 应该做 发送验证码 验证是否拥有该手机号，若有 继续到注册的第二步
            })
            .catch(() => {
              // on cancel
            })
        } else {
          localStorage.setItem('tel', this.tel)
          this.$router.push('step2').then(r => {})
        }
      } else {
        Dialog.confirm({
          message: '请勾选用户协议',
          confirmButtonText: '同意用户协议并继续'
        }).then(() => {
          this.checked = true
        })
      }
    }
  }
}
</script>

<style lang="stylus">
.boxCheck {
  position: absolute;
  bottom 20px
  left 50%
  transform translate(-50%)
  opacity 0.4
}
</style>
